{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highstock Demos\n",
    "=========\n",
    "1.7 million points with async loading: http://www.highcharts.com/stock/demo/lazy-loading\n",
    "------------------------------------------------------------------------------------\n",
    "\n",
    "This example generates a candlestick chart, which updates (async loading) when a different time period is selected\n",
    "by the navigation bar due to the large dataset.\n",
    "\n",
    "Due to the update, this chart requires JS function in the beginning and xAxis.events options."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/stock/highstock.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/stock/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       "            $.getJSON(&quot;http://www.highcharts.com/samples/data/from-sql.php?callback=?&quot;, function (json_data)\n",
       "                {\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "            json_data = [].concat(json_data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {&quot;text&quot;: &quot;Displaying 1.7 million data points in Highcharts Stock by async server loading&quot;}, &quot;title&quot;: {&quot;text&quot;: &quot;AAPL history by the minute from 1998 to 2011&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {&quot;floor&quot;: 0}, &quot;chart&quot;: {&quot;zoomType&quot;: &quot;x&quot;, &quot;renderTo&quot;: &quot;container&quot;}, &quot;tooltip&quot;: {}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;scrollbar&quot;: {&quot;liveRedraw&quot;: false}, &quot;xAxis&quot;: {&quot;minRange&quot;: 3600000, &quot;events&quot;: {&quot;afterSetExtremes&quot;: function afterSetExtremes(e) {\n",
       "\n",
       "        var chart = $(&#x27;#container&#x27;).highcharts();\n",
       "\n",
       "        chart.showLoading(&#x27;Loading data from server...&#x27;);\n",
       "        $.getJSON(&#x27;http://www.highcharts.com/samples/data/from-sql.php?start=&#x27; + Math.round(e.min) +\n",
       "                &#x27;&amp;end=&#x27; + Math.round(e.max) + &#x27;&amp;callback=?&#x27;, function (data) {\n",
       "\n",
       "                chart.series[0].setData(data);\n",
       "                chart.hideLoading();\n",
       "            });\n",
       "    }}}, &quot;exporting&quot;: {}, &quot;rangeSelector&quot;: {&quot;buttons&quot;: [{&quot;count&quot;: 1, &quot;text&quot;: &quot;1h&quot;, &quot;type&quot;: &quot;hour&quot;}, {&quot;count&quot;: 1, &quot;text&quot;: &quot;1d&quot;, &quot;type&quot;: &quot;day&quot;}, {&quot;count&quot;: 1, &quot;text&quot;: &quot;1m&quot;, &quot;type&quot;: &quot;month&quot;}, {&quot;count&quot;: 1, &quot;text&quot;: &quot;1y&quot;, &quot;type&quot;: &quot;year&quot;}, {&quot;text&quot;: &quot;All&quot;, &quot;type&quot;: &quot;all&quot;}], &quot;inputEnabled&quot;: false, &quot;selected&quot;: 4}, &quot;navigator&quot;: {&quot;adaptToUpdatedData&quot;: false}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "            var data = [{&quot;data&quot;: json_data, &quot;dataGrouping&quot;: {&quot;enabled&quot;: false}, &quot;type&quot;: &quot;candlestick&quot;, &quot;name&quot;: &quot;Series 1&quot;}]\n",
       "            option.series = data;\n",
       "\n",
       "            var navi_data = {&quot;data&quot;: json_data, &quot;type&quot;: &quot;line&quot;}\n",
       "            option.navigator.series = navi_data;\n",
       "\n",
       "            var chart = new Highcharts.StockChart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            });\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=520 width=820></iframe>"
      ],
      "text/plain": [
       "<highcharts.highstock.highstock.Highstock at 0x7fa61c0e3490>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highstock\n",
    "H = Highstock()\n",
    "\n",
    "data_url = 'http://www.highcharts.com/samples/data/from-sql.php?callback=?'\n",
    "H.add_data_from_jsonp(data_url, 'json_data', 'candlestick', dataGrouping = {'enabled': False})\n",
    "\n",
    "script = \"\"\"json_data = [].concat(json_data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);\"\"\"\n",
    "H.add_JSscript(script, 'head')\n",
    "\n",
    "H.add_navi_series_from_jsonp() # not really useful, but it shows in highstock demo\n",
    "\n",
    "options = {\n",
    "    'chart' : {\n",
    "        'zoomType': 'x'\n",
    "    },\n",
    "\n",
    "    'navigator' : {\n",
    "        'adaptToUpdatedData': False,\n",
    "    },\n",
    "\n",
    "    'scrollbar': {\n",
    "        'liveRedraw': False\n",
    "    },\n",
    "\n",
    "    'title': {\n",
    "        'text': 'AAPL history by the minute from 1998 to 2011'\n",
    "    },\n",
    "\n",
    "    'subtitle': {\n",
    "        'text': 'Displaying 1.7 million data points in Highcharts Stock by async server loading'\n",
    "    },\n",
    "\n",
    "    'rangeSelector' : {\n",
    "        'buttons': [{\n",
    "            'type': 'hour',\n",
    "            'count': 1,\n",
    "            'text': '1h'\n",
    "        }, {\n",
    "            'type': 'day',\n",
    "            'count': 1,\n",
    "            'text': '1d'\n",
    "        }, {\n",
    "            'type': 'month',\n",
    "            'count': 1,\n",
    "            'text': '1m'\n",
    "        }, {\n",
    "            'type': 'year',\n",
    "            'count': 1,\n",
    "            'text': '1y'\n",
    "        }, {\n",
    "            'type': 'all',\n",
    "            'text': 'All'\n",
    "        }],\n",
    "        'inputEnabled': False, # it supports only days\n",
    "        'selected' : 4 # all\n",
    "    },\n",
    "\n",
    "    'xAxis' : {\n",
    "        'events' : {\n",
    "            'afterSetExtremes' : \"\"\"function afterSetExtremes(e) {\n",
    "\n",
    "        var chart = $('#container').highcharts();\n",
    "\n",
    "        chart.showLoading('Loading data from server...');\n",
    "        $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +\n",
    "                '&end=' + Math.round(e.max) + '&callback=?', function (data) {\n",
    "\n",
    "                chart.series[0].setData(data);\n",
    "                chart.hideLoading();\n",
    "            });\n",
    "    }\"\"\"\n",
    "        },\n",
    "        'minRange': 3600 * 1000 # one hour\n",
    "    },\n",
    "\n",
    "    'yAxis': {\n",
    "        'floor': 0\n",
    "    },\n",
    "\n",
    "}\n",
    "\n",
    "H.set_dict_options(options)\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
